<template>
  <div class="student-Manager-body" v-loading="loading">
    <el-card class="search-body card" shadow="hover">
      <el-form ref="form" :model="Search">
        <el-row :gutter="30">
          <el-col :span="4">
            <el-form-item>
              <el-input v-model="Search.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-select v-model="Search.classId" placeholder="请选择班级">
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.className"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="Search.dormId" placeholder="请选择宿舍">
              <el-option
                v-for="item in dormList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <div class="block">
              <el-date-picker
                v-model="Search.startTOend"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="入学日期"
                end-placeholder="毕业日期"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="doSearch()">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="8">
            <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              @change="handleChange"
            ></el-cascader>
          </el-col>
          <el-col class="resetButton" :span="4">
            <el-form-item>
              <el-button type="primary" icon="el-icon-delete" @click="doreset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="student-list-body card" :body-style="{ padding: '20px'}">
      <el-row :gutter="30">
        <el-col :span="4">
          <el-button size="small" @click="handleClick()">新增</el-button>
        </el-col>
        <el-col :span="20" v-show="this.Pager.pageSize>10">
          <div class="student-pager">
            <!-- 头部分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Pager.start"
              :page-sizes="Pager.pageSizes"
              :page-size="Pager.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="Pager.total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
      <el-table :data="studentList" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="demo-table-expand">
              <el-form-item label="姓名">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="性别">
                <span>{{ props.row.sexv }}</span>
              </el-form-item>
              <el-form-item label="班级">
                <span>{{ props.row.classname }}</span>
              </el-form-item>
              <el-form-item label="宿舍">
                <span>{{ props.row.dormname }}</span>
              </el-form-item>
              <el-form-item label="城市">
                <span>{{ props.row.cityText }}</span>
              </el-form-item>
              <el-form-item label="地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="电话">
                <span>{{ props.row.tel }}</span>
              </el-form-item>
              <el-form-item label="邮编">
                <span>{{ props.row.zip }}</span>
              </el-form-item>
              <el-form-item label="工作">
                <span>{{ props.row.job }}</span>
              </el-form-item>
              <el-form-item label="职业">
                <span>{{ props.row.major }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sexv"></el-table-column>
        <el-table-column label="班级" prop="classname"></el-table-column>
        <el-table-column label="宿舍" prop="dormname"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 尾部分页器 -->
      <div class="student-pager">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pager.start"
          :page-sizes="Pager.pageSizes"
          :page-size="Pager.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Pager.total"
        ></el-pagination>
      </div>
    </el-card>
    <detail  @getStudentList="getStudentList" :classList="classList" :dormList="dormList" ref="detail" />
  </div>
</template>

<script>
import studentList from "@/api/studentManager/student";
import classList from "@/api/classManager/classList";
import dormList from "@/api/dormManager/dormManager";
import { TextToCode,regionData } from "element-china-area-data";
import detail from "@/views/Manager/studentManger/Detail";
import getDetail from "@/api/studentManager/detail";
export default {
  components: {
    detail
  },
  data() {
    return {
      // 分页器设置
      Pager: {
        start: 1,
        pageSizes: [10, 20, 30, 40],
        pageSize: 10,
        total: 600
      },
      //   地址选择器数据
      options: regionData,
      selectedOptions: [],
      //搜索条件设置
      Search: {},
      // 学生列表
      studentList: [],
      //  班级列表
      classList: [],
      //  宿舍列表
      dormList: [],
      // 加载
      loading: false
    };
  },
  methods: {
    //打开弹窗
    //查看，如何分辨查看和修改？查看干嘛要用这个。。
    handleClick(row) {
      this.$refs.detail.studentDetail = [];
      this.$refs.detail.openDialog();
      //判断是添加还是修改
      //以此判断弹窗是否有内容
      if (row) {
        this.id = row.id;
        this.getstudentDetail(row.id);
      } else {
        this.$refs.detail.isloading = false;
      }
    },
    // 搜索
    doSearch() {
      this.getStudentList();
      this.Pager.start = 1;
    },
    doreset() {
      this.Search = {};
      this.getStudentList();
    },
    // 换条数,换limit
    handleSizeChange(val) {
      this.Pager.start = 1;
      this.Pager.pageSize = val;
      this.getStudentList();
    },
    // 换页码，换start
    handleCurrentChange(val) {
      this.Pager.start = val;
      this.getStudentList();
    },
    //获取学生列表方法，在执行无规则查询的时候，还是要看后台的编写情况进行传值，最好不要无脑传值
    getStudentList() {
      this.loading = true;
      if (this.Search.startTOend) {
        this.Search.startTime = this.Search.startTOend[0];
        this.Search.endTime = this.Search.startTOend[1];
      }
      // 对象混合的方式有很多方式
      // 三点运算符只是其中一种，以我的习惯会用assign
      // 条件查询，所有的条件非必须
      studentList({
        start: this.Pager.start,
        limit: this.Pager.pageSize,
        ...this.Search
      }).then(res => {
          this.studentList = res.data.data.list;
          this.Pager.total = res.data.data.totalRow;
          this.loading = false;
        }).catch(res => {
          this.loading = false;
          this.$message({
            message: "网络开小差啦，请请稍后重试",
            type: "warning"
          });
        });
    },
    // 学生详情
    getstudentDetail(id){
      this.$refs.detail.getCost(id)
      getDetail({
        id: id
      }).then(res => {
        this.$refs.detail.xyUser = res.data.data;
        var temp = this.$refs.detail.xyUser;
        try{
          temp.startTOend=[temp.dormStartTime,temp.dormEndTime]
        }catch(err){
          console.log(err)
        }
        try{
          temp.city=temp.city.split(",")
        }catch(err){
          console.log(err)
        }
        this.$refs.detail.isloading = false;
      });
    },
    // 班级列表
    getClassList() {
      classList({
        start: 1,
        limit: 99
      }).then(res => {
        this.classList = res.data.data.list;
      });
    },
    // 宿舍列表
    getdormList() {
      dormList({
        start: 1,
        limit: 99
      }).then(res => {
        this.dormList = res.data.data.list;
        console.log(res, 11111);
      });
    },
    //地址信息
    handleChange(value) {
      console.log(value);
    },
    init() {
      this.loading = true;
      var student = studentList({
        start: 1,
        limit: 10
      });
      var clazz = classList({
        start: 1,
        limit: 99
      });
      var dorm = dormList({
        start: 1,
        limit: 99
      });
      var _this = this;
      Promise.all([student, clazz, dorm])
        .then(res => {
          this.studentList = res[0].data.data.list;
          this.Pager.total = res[0].data.data.totalRow;
          this.classList = res[1].data.data.list;
          this.dormList = res[2].data.data.list;
          this.loading = false;
        })
        .catch(res => {
          this.loading = false;
          this.$message({
            message: "网络开小差啦，请请稍后重试",
            type: "warning"
          });
        });
    }
  },
  created() {
    this.init()
  }
};
</script>
<style lang="scss" scoped>
.student-pager {
  float: right;
}
.student-Manager-body {
  .card {
    margin: 0 auto;
    margin: 30px;
  }
  .test {
    background: red;
  }
  .resetButton {
    float: right;
  }
}
</style>